<template>
  <div id="files">
    <div class="but">
       <button
            @click="canHandler(0)"
            :class="prev_index == 1 ? 'prev_xuzho' : ''"
          >
            参数
          </button>
          <button
            @click="canHandler(1)"
            :class="prev_index == 2 ? 'prev_xuzho' : ''"
          >
            文件
          </button>
    </div>
    <div class="can" v-show="num">
      <el-table :data="ruleForm2" style="width: 90%" height="650"  stripe
        :header-cell-style="{
          background: '#3b465b',
          color: '#ffffff',
          border: '1px solid #2c3449',
        }">
        <el-table-column prop="ruleForm2.name" label="Name"  width="500px"
          align="center">
          <input type="text" v-model="ruleForm2[0].name" />
        </el-table-column>
        <el-table-column prop="ruleForm2.checktime" label="Time" width="500" align="center" >
          <input type="text" v-model="ruleForm2[0].checktime" placeholder="请输入时间" />
        </el-table-column>
        <el-table-column prop="ruleForm2.number" label="Num" width="500" align="center">
          <input
            type="text"
            v-model="ruleForm2[0].number"
            onchange="if(!/^(([0-8][0-9]?|9[0-8]?)\.\d+|[0-9][0-9]?|300)$/.test(value)){value='';alert('请输入区间范围内的数字!');}"
            placeholder="请输入0-300之间的数字"
          />
        </el-table-column>
        <el-table-column  label="操作" width="200">
          <template>
            <el-button @click="runClick(ruleForm2)" type="text" size="small"
              >运行</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fil" v-if="fil">
      <el-table
        :data="tableData"
        style="width: 90%"
        height="650"
        stripe
        :header-cell-style="{
          background: '#3b465b',
          color: '#ffffff',
          border: '1px solid #2c3449',
        }"
      >
        <el-table-column
          prop="fileName"
          label="Selected Filename"
          width="500px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="image"
          label="image"
          width="90"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="product"
          label="Product"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startTime"
          label="Start Time"
          width="260"
          align="center"
        >
        </el-table-column>
          <el-table-column
          prop="endTime"
          label="End Time"
          width="260"
          align="center"
        >
        </el-table-column>
        <el-table-column label="Down" width="348" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { fileData } from "../../service/index";
export default {
  name: "files",
  data() {
    return {
      prev_index: 1,
      //参数按钮
      num: true,
      //文件按钮
      fil: false,
      //获取组件传值
      value2: {
        input_or_output: "input",
        model_log_id: "",
      },
      //表格
      tableData: [],
      // 参数input框
      ruleForm2: [
        {
          name: "太阳F10.7指数",
          checktime: "",
          number: "",
        },
      ],
    };
  },
  created() {},
  mounted() {
    let _that = this;
    this.$bus.$on("name", function (aa) {
      _that.value2.model_log_id = aa.model_log_id;
    });
  },
  // 销毁实例
  beforeDestroy() {
    this.$bus.$off("name");
  },
  methods: {
    //参数与文件
    canHandler(prev) {
      if (prev == 0) {
        this.num = true;
        this.fil = false;
      } else {
        this.tableData = [];
        (this.num = false), (this.fil = true);
        var _this = this;
        fileData(this.value2).then((res) => {
          res.data.data.forEach((item) => {
            _this.tableData.push({
              fileName: item.name,
              startTime: item.start_time,
              endTime: item.end_time,
              downland: item.download,
            });
          });
        });
      }
    },
    // 下载按钮
    handleClick(prev) {
      window.location.href = prev.downland;
    },
    //  提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped lang="scss">
#files {
  width: 100%;
  height: 100%;
 .but {
    display: flex;
    justify-content: center;
    button {
      width: 120px;
      height: 40px;
      font-size: 16px;
      color: #fff;
      background: #3d465b;
      border: 1px solid #bcdec0;
    }
    .prev_xuzho {
      background: #1c75bc;
      color: #fff;
    }
  }
  ::v-deep .el-button--primary{
    width: 100px;
    background-color:#3b465b;
    color: #ffff;
  }
  ::v-deep .el-button--primary.is-plain:hove{
     width: 100px;
    background-color: #00aeef;
    border: 1px solid #4ab4ff;
  }
  ::v-deep .el-button+.el-button, .el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
}
  .can {
     margin-top: 50px;
    height: 450px;
    margin-left: 97px;
    ::v-deep input {
      background-color: none;
      outline: none;
      border: none;
      height: 40px;
    width: 100%;
    }
  }
  .fil {
    // width: 100%;
    margin-top: 50px;
    height: 450px;
    margin-left: 97px;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 8px;
    background-color: #3b465b;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
  ::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: aqua;
  }
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    background: #3b465b;
  }
}
</style>